import { useRef, createRef } from 'react'

// !点击按钮获取 Input 框中的 value

export default function App() {
  // !#1 调用 useRef hook 生成 useRef 引用
  const inputRef = useRef(null)
  // useRef 每次渲染都会返回相同的引用（【有点像全局变量】），而 createRef 每次渲染都会返回一个新的引用
  // const inputRef = createRef()
  const handleClick = () => {
    // !#3 通过 inputRef.current 就能拿到 input DOM 啦
    console.log(inputRef.current.value)
  }
  return (
    <div>
      {/* //!#2 用 inputRef 引用和 input 框的 ref 属性进行绑定 */}
      <input ref={inputRef} />
      <button onClick={handleClick}>获取内容</button>
    </div>
  )
}
